<template>
  <div style="position: relative">
    <div class="detail">
      <div class="bookImg">
        <img :src="'/static/images/' + $route.path.slice(8)+'.jpg'" alt="..." class="img-rounded">
      </div>
      <item/>
    </div>
    <div
      style="position:absolute;left:278px;top:16px;cursor: pointer;color:red;font-size:20px"
      :title="isActive?'取消收藏':'加入收藏'"
    >
      <i :class="{'el-icon-star-on':isActive,'el-icon-star-off':!isActive}" @click="tooge"></i>
    </div>

    <div style="position: relative; color:#409EFF;">
      <div
        style="position: absolute;top:25px;left:0;background-color:#fff;width:100%;height:600px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px"
      >
        <div style="width:100%; height:100px;line-height:25px;color:#333; padding: 5px 5px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Item from "@/components/Item";
export default {
  components: {
    Item
  },
  data() {
    return {
      isActive: "",
      commentArr: [],
      commentList: this.$route.path.slice(1)
    };
  },
  mounted() {
    //加载完成时 获取本地存储数据
    var starArr = JSON.parse(localStorage.getItem("superMan") || "[]");
    //获取当前路由地址
    var path = this.$route.path.slice(1);
    //循环本地数据路由
    return starArr.forEach((item, index) => {
      //如果和当前路由匹配
      if (item.path == path)
        //设置收藏状态
        this.isActive = item.isActive;
    });
  },

  created() {
    this.$http
      .get("static/comment.json")
      .then(({ data }) => (this.commentArr = data));
  },
  methods: {
    //点击收藏时
    tooge() {
      //设置收藏状态
      this.isActive = !this.isActive;
      //把状态数据打包成对象
      var obj = {
        path: this.$route.path.slice(1),
        isActive: this.isActive
      };
      //状态为true 执行收藏成功函数
      this.isActive ? this.openCenter() : "";
      //把打包的状态数据传给 $Store
      this.$store.commit("addArr", obj);
    },
    //收藏时执行的函数
    openCenter() {
      this.$message({
        message: "收藏成功",
        center: true,
        duration: 2000,
        type: "success"
      });
    }
  }
};
</script>


<style scoped>
.bookImg img {
  width: 300px;
  height: 441px;
}
.detail {
  display: flex;
  padding-top: 20px;
  line-height: 30px;
}

div.el-divider--horizontal {
  margin: 8px 0 8px 0;
}
</style>
